<template>
  <!-- 登录页面 -->
  <div id="container">
    <div class="login-box">
      <h1 class="title">登录</h1>
      <el-form class="login-form" ref="loginForm" :rules="loginRules" :model="loginForm" label-position="left"
        status-icon label-width="80px" size="medium">
        <el-form-item prop="username" label="用户名" class="form-item-username form-item">
          <el-input type="text" auto-complete="true" v-model="loginForm.username" placeholder="请输入用户名"
            prefix-icon="el-icon-user" class="input-username"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码" class="form-item-password form-item">
          <el-input type="password" auto-complete="true" v-model="loginForm.password" placeholder="请输入密码"
            prefix-icon="el-icon-lock" show-password class="input-password">
          </el-input>
        </el-form-item>
        <el-form-item class="form-item">
          <el-button type="primary" @click="submit" class="btn-submit">登陆
          </el-button>
          <el-button class="btn-forget" @click="forget">忘记密码</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import {
    login,
    accessToken
} from '@/api/auth'
import {
    Message
} from 'element-ui'

export default {
    name: 'LoginIndex',
    data () {
        return {
        // 登录表单
            loginForm: {
                username: '',
                password: ''
            },
            // 登录表单验证
            loginRules: {
                username: [{
                    required: true,
                    message: '用户名不能为空',
                    trigger: 'change'
                }],
                password: [{
                    required: true,
                    message: '密码不能为空',
                    trigger: 'change'
                }]
            }
        }
    },
    methods: {
        // 登录提交
        submit () {
            this.$refs.loginForm.validate(valid => {
                // 表单校验
                if (valid) {
                    let form = {
                        username: this.loginForm.username,
                        password: this.loginForm.password
                    }
                    // 获取access_token
                    accessToken(form).then((authResponse) => {
                        if (authResponse && authResponse.code === 200) {
                            let token = authResponse.data.access_token
                            window.sessionStorage.setItem('access_token', token)
                            // 登陆
                            login(form).then((loginResponse) => {
                                if (loginResponse.code === 200) {
                                    let data = loginResponse.data
                                    window.sessionStorage.setItem('userInfo', JSON.stringify(data))
                                    // tip信息提示
                                    Message.success({
                                        message: loginResponse.message
                                    })
                                    // 跳转首页
                                    this.$router.push({
                                        path: '/index/'
                                    })
                                } else {
                                    // tip信息提示
                                    Message.warning({
                                        message: loginResponse.message
                                    })
                                    return false
                                }
                            })
                        } else {
                            // tip信息提示
                            Message.error({
                                message: authResponse.message
                            })
                            return false
                        }
                    })
                } else {
                    return false
                }
            })
        },
        // 表单重置
        resetForm (formName) {
            this.$refs[formName].resetFields()
        },
        forget () {
        // tip信息提示
            Message.warning({
                message: '该功能正在开发中...'
            })
        }
    }
    // mounted() {}
}
</script>

<style scoped>
  #container {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    background-color: #55557f;
  }

  .login-box {
    width: 30%;
    height: 30%;
    margin: 0px;
    padding: 10px;
    background-color: #ffffff;
    position: relative;
    left: 35%;
    top: 30%;
  }

  .title {
    width: 100%;
    height: 10%;
    text-align: center;
    font-size: 20px;
    color: #00aaff;
    margin: 5% 0px 0px 0px;
  }

  .login-form {
    width: 100%;
    height: 90%;
    margin-top: 30px;
  }

  .form-item {
    width: 90%;
    height: 20%;
    margin-bottom: 10px;
    margin: 10px 5% 0px 5%;
  }
</style>
